<template>
    <svg v-if="iconfontType=='iconfontColor'" class="icon" :class="[`${iconfontType}`]" aria-hidden="true">
        <use :xlink:href="'#'+type"></use>
    </svg>
    <i v-else-if="classify=='jpaasIcon'" class="jpaasIconfont" :class="[type]" :style="{'font-size':size}"></i>
    <i v-else :class="[iconfontType,type]" :style="{'font-size':size}"></i>
</template>

<script>
export default {
  name: "myIcon",
  props: {
    type: {
      type: String,
      default: ''
    },
    size:{
      type:String,
      default:''
    },
      classify:{
          type:String,
          default:''
      }
  },
  data(){
    return{
        iconfontType:'iconfont'
    }
  },
    created(){
      if(this.type.includes('color')){
          this.iconfontType = 'iconfontColor'
      }else if(this.type.includes('fill')){
          this.iconfontType='iconfontFill'
      }else if(this.type.includes('line')){
          this.iconfontType='iconfontLine'
      }
    }
}
</script>

<style scoped>
.icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15rem;
    fill: currentColor;
    overflow: hidden;
    font-size: 1rem;
}
</style>
